Data Viz Makeover 2

Redesigning an interactive graph for a better user experience in clarity and aesthetics.

Sean Samuel Prajs https://github.com/SeanP0110 (SMU)
2022/03/27

1 Critique

Prof. Kam has given us the following graph to work on:

Original Graph

1.1 Clarity

First, let us look at the elements of the graph that are detrimental to clarity.

  1. Titles and Subtitles
  1. Axes
  1. Variable names:
  1. Colouring:
  1. Positioning:

1.2 Aesthetics

Next, let us discern the issues with the aesthetics of the visualisation:

  1. Too large data:
  1. Positioning:
  1. Axes:

1.3 Interactivity

Lastly, in the critique section, we will be examining the flaws in the interactive features of the visualisation.

  1. Filters
  1. Adjacency Matrices:
  1. Bar Charts:

2 Improvements

2.1 A first sketch

Below you can see the plan for a new and improved visualisation: GraphPlan

So how does this improve the abovementioned pain points? Let us find out! ## 2.2 Clarity

  1. Titles and Subtitles
  1. Axes
  1. Variable names:
  1. Colouring:
  1. Positioning:

2.3 Aesthetics

  1. Too large data:
  1. Positioning:
  1. Axes:

2.4 Interactivity

Lastly, how will we remedy some of the interactivity flaws?

  1. Filters
  1. Adjacency Matrices:
  1. Bar Charts:

3 Visualisation

Under here you can see a snapshot of the final product of this Data Viz Makeover. The full interactive version can be found on Tableau Public here.

FinalGraph

4 Step-By-Step Guide to Visualisation

Step Change Screenshot
1. Open Tableau Prep Builder Image
2. Import both, the shape file (green) and the data file (orange) into Tableau Prep Builder and drag them into the main pane. Image
3. Click “view and clean data” (1.) on the data file flow. Change to list view (2.) and find the variable “TIME_PER_HOUR” (3.) and rename it to “HOUR_OF_DAY” (4.). Image
4. Repeat the previous step for variables “ORIGIN_SZ” and “DESTINATION_SZ”, renaming them “ORIGIN_SUBZONE” and “DESTINATION_SUBZONE” respectively. Image
5. Navigate to the “YEAR_MONTH” variable (1.). Change its data type from “String” to “Date” (2.). Image
6. Next, move to the profile pane (1.) and find the variable “ORIGIN_SUBZONE” and right click on the “null” value category (2.). Exclude the null value from the variable (3.). Image
7. Repeat the last step with variable “DESTINATION_SUBZONE”. Image
8. Go back to the flow menu. Right click shape file data and click on “Rename”. Rename the file to “Shapes_Origin”. Image
9. Drag “Shapes_Origin” towards the cleaned data file and drop it on the appearing “Join” pane. Image
10. Change the join type to “full”.

(Note: the purpose of this is to ensure that both, the origin and destination subzone columns, will be able to interact with the shapefile.)
Image
11. Click “Add” in the “Applied Join Clauses” section to add a join. Image
12. Join the “Clean 1” and “Shapes_Origin” tables on their “ORIGIN_SUBZONE” and “SUBZONE_N” variables respectively.

Add a join clause between “DESTINATION_SUBZONE” and “SUBZONE_N”.
Image
13. The final join should look as follows. Make sure the settings and numbers match what is shown inside the orange boxes in the image. Image
14. Add an output node to the flow. Image
15. Locate an appropriate location on your device to save the output file (1.). Rename the file to “Bus Flows and Shapes” or another name you deem appropriate (2.). Last, press “Run Flow” (3.). Image
16. Open Tableau Desktop and import “Bus Flows and Shapes” Image
17. Got to “Sheet 1” (1.) and rename it to “Origin Subzone Trips by Hour of Day” (2.). Image
18. Go to “Hour of Day” and right click it (1.) and convert it from a continuous to a discrete variable (2.). Image
19. Drag “Hour of Day” into the column pane and “Total Trips” into the row pane. Image
20. Drag “Hour of Day” into the filters pane and filter out all hours outside the 5 to 23 range.

Untick the boxes for “Null”, “0”, “1”, “2”, “3”, and “4”.
Image
21. Next, drag “Origin Subzone” into the filter pane and only select “ADMIRALTY”. Image
22. Show the Filter for “Origin Subzone”. Image
23. Change the “Origin Subzone” filter to a single value drop down list. Image
24. Drag “Day Type” into both, the column pane and the colour pane (orange boxes).

Change the view to from “Standard” to “Entire View” (green box).
Image
25. Right click anywhere on the x-axis and and deselect “Show Header”. Image
26. Right click anywhere on the y-axis and click “Edit Axis” Image
27. Change the axis title to “Total Number of Trips Made”. Image
28. Click on “Tooltip” and delete the “Day Type” line. Image
29. Right click on the title and select “Edit Title”. Image
30. Change the title to “Trips Generated From ”. Image
31. Right click the sheet tab and duplicate the current sheet. Image
32. Rename the duplicated sheet tab to “Destination Subzone Trips by Hour of Day”. Image
33. Drag “Destination Subzone” to replace “Origin Subzone” in the filters pane. Image
34. Select only “ADMIRALTY” and click “Ok”. Image
35. Show the filter and change it to a single select dropdown menu as outlined in steps numbers 22 and 23. Image
36. Change the title of the graph to “Trips Attracted To ” as shown in steps numbers 29 and 30. Image
37. Create a new sheet. Image
38. Rename the sheet to “Adjacency Matrix Weekday” Image
39. Drag “Origin Subzone” and “Destination Subzone” into the columns and rows panes respectively.

Drop the “Total Trips” variable onto the text pane.

Change the view to “Entire View”.
Image
40. Next, select the “Show Me” pane and change the graph type to heatmap.

Make sure to check that the graph shows in “Entire View”
Image
41. Drag “Day Type” into the filters pane and only select “WEEKDAY”. This time we will not be showing the filter in the righthand-side menu. Image
42. Add filters for “Origin Subzone” and “Destination Subzone”. Set them as dropdown menu multiselect.

Furthermore, right click the “SUM(Total Trips)” and hide it.
Image
43. Right click the “SUM(Total Trips)” field in the markers pane and select “Quick Table Calculations” > “Percent of Total”. Image
44. Duplicate the current sheet as shown in step number 31.

Rename the sheet to “Adjacency Matrix Weekends / Holiday”.

The title should change automatically.
Image
45. Switch the “Day Type” filter to “WEEKENDS/HOLIDAY”. Image
46. Open a new Dashboard Image
47. Drag in the two “By Hour of Day” Sheets next to each other. The “Origin” sheet should be on the left and the “Destination” sheet should be on the right. Make sure the legend is on top, then the origin filter and then the destination filter. Image
48. Go to the “Adjacency Matrix Weekday” (1.) sheet and for each of the two filters (2.) select: “Apply to Worksheets”(3.) > “Selected Worksheets”(4.). Image
49. Tick the “Adjacency Matrix Weekends/Holiday” and then click ok to sync the filters over the two sheets. Image
50. Go back to the Dashboard and arrange the sheets and filters in the following way. Image
51. Insert title and subtitles. Title font: 28 Subtitle font: 20 Sub-Subtitle font: 15 Graph Title font: 10 Image

5 Key Insights

  1. Weekend/Weekday split:
  1. Central Timings:
  1. Total bus trips in Singapore.

Distill is a publication format for scientific and technical writing, native to the web.

Learn more about using Distill for R Markdown at https://rstudio.github.io/distill.